<template>
	<view>
		<scroll-view scroll-y :show-scrollbar="false" class="swiper">
			<view style="padding: 20rpx 0rpx;" v-for="(item,index) in 20" @click="gotoMsgPage">
				<view class="flex">
					<view class="flex" style="width: 85%;">
						<view class="avatar">
							<image src="/static/test/userheader.jpg" mode="widthFix"></image>
						</view>
						<view class="" style="width: 75%;line-height: 40rpx;">
							<view class="" style="font-size: 28rpx;">
								标题
							</view>
							<view class="isText">
								内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
							</view>
						</view>
					</view>
					<view class="" style="width: 15%;font-size: 24rpx;color: #9C9C9C;text-align: right;">
						10分钟前
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "ChatList",
		data() {
			return {

			};
		},
		methods: {
			gotoMsgPage() {
				uni.navigateTo({
					url: '/messagePages/pages/msgpage?MsgGroupID=' + 2
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		margin-right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
	}

	.isText {
		font-size: 24rpx;
		color: #9C9C9C;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>